<template>
  <div class="notice">
    <detailIntroduce title="预定须知">
      <div class="notice-inner">
        <template v-for="(item, index) in orderRules" :key="index">
          <div class="item">
            <span class="title">{{ item.title }}</span>
            <span class="intro">{{ item.introduction }}</span>
            <span class="tip" v-if="item.tips">查看说明</span>
          </div>
        </template>
      </div>
    </detailIntroduce>
  </div>
</template>

<script setup>
import detailIntroduce from "@/components/detail-house-introduce/detail-introduce.vue"

defineProps({
  orderRules: {
    type: Array,
    default: () => [],
  },
})
</script>

<style lang="less" scoped>
.notice {
  padding: 8px;
  .notice-inner {
    .item {
      display: flex;
      margin: 10px 0;
      font-size: 12px;

      .title {
        width: 64px;
        color: #666;
      }

      .intro {
        flex: 1;
        color: #333;
      }
    }
  }
}
</style>
